<template>
	<view class="container">
		<page-navbar title="预约详情" />
		<view v-if="order.status === 1" class="verify-section">
			<view class="verify-title">
				核验码
			</view>
			<view class="verify-code">
				<view v-for="(char, idx) in codeChars" :key="idx" class="code-char">{{ char }}</view>
			</view>
			<view class="verify-desc">提示：请在入园时向工作人员出示此核验码进行预约核验</view>
		</view>
		<view class="order-detail-card" @click="goDetail()">
			<image class="order-image" :src="common.defaultImg(order.info?.coverId)" mode="aspectFill"></image>
			<view class="order-row">
				<text class="label">订单状态：</text>
				<text class="value" :class="'status-' + order.status">{{ getStatusText(order.status) }}</text>
			</view>
			<view class="order-row">
				<text class="label">预约活动：</text>
				<text class="value">{{ order.title || order.info?.title || '-' }}</text>
			</view>
			<view class="order-row">
				<text class="label">预约时间：</text>
				<text class="value">{{ filterTime(order.bookingDay) }} {{ order.bookingTime }}</text>
			</view>
		</view>
		<view class="tourist-list">
			<view class="tourist-title">预约游客</view>
			<view v-for="tourist in order.tourist" :key="tourist.id" class="tourist-item">
				<view class="tourist-row">
					<text class="tourist-label">姓名：</text>
					<text class="tourist-value">{{ tourist.name }}</text>
				</view>
				<view class="tourist-row">
					<text class="tourist-label">电话：</text>
					<text class="tourist-value">{{ maskPhone(tourist.phone) }}</text>
				</view>
				<view class="tourist-row">
					<text class="tourist-label">身份证：</text>
					<text class="tourist-value">{{ maskIdCard(tourist.idCard) }}</text>
				</view>
			</view>
		</view>


		<!-- 底部预约按钮 -->
		<view class="bottom-action">
			<button class="reserve-btn" @click="cancelOrder" v-if="order.status == 1">
				<text class="btn-text">取消预约</text>
			</button>
			<button class="reserve-btn" @click="getBack" v-else>
				<text class="btn-text">返回</text>
				<uni-icons type="undo" size="18" color="#fff"></uni-icons>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import PageNavbar from '@/components/page-navbar/page-navbar.vue';
import dayjs from 'dayjs';

import api from '@/api/index.js';
const imgUrl = uni.imgUrl;

const order = ref({});

onLoad((options) => {
	// 订单对象通过路由参数传递，需反序列化
	if (options.order) {
		try {
			order.value = JSON.parse(decodeURIComponent(options.order));
			console.log(order.value);

		} catch (e) {
			order.value = {};
		}
	}
});

const getBack = () => {
	uni.navigateBack()
}

const filterTime = (time) => {
	return dayjs(time).format('YYYY-MM-DD');
}

const cancelOrder = () => {
	uni.showModal({
		title: '提示',
		content: '确定取消该预约吗？',
		success: (res) => {
			if (res.confirm) {
				api.activistApi.cancel({ id: [order.value.id] }).then(res => {
					uni.showToast({
						title: '预约已取消',
						icon: 'none'
					});
					uni.navigateBack();
				});
			}
		}
	})
}

const goDetail = () => {
	uni.navigateTo({
		url: `/pages/details/activity?id=${order.value.info?.id}&type=2`
	})
}

const getStatusText = (status) => {
	const map = {
		1: '待使用',
		2: '已取消',
		3: '已完成'
	};
	return map[status] || '其他';
};

function maskPhone(phone) {
	if (!phone) return '';
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
function maskIdCard(idCard) {
	if (!idCard) return '';
	return idCard.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2');
}

const codeChars = computed(() => (order.value.id ? String(order.value.id).split('') : []));
</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f1f6;
	width: 100vw;
	padding: 24rpx 0;
	box-sizing: border-box;
}

.verify-section {
	margin: 0 24rpx;
	padding: 24rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.verify-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
	color: #333;
}

.verify-code {
	display: flex;
	justify-content: center;
	gap: 12rpx;
	align-content: center;

	.code-char {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 88rpx;
		background: #c8e6c9;
		color: #1b5e20;
		font-size: 64rpx;
		font-weight: 900;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(46, 125, 50, 0.12);
		letter-spacing: 0;
		border: 1rpx solid #43a047;
		transition: background 0.2s;
	}
}

.verify-desc {
	margin-top: 36rpx;
	font-size: 24rpx;
	color: #888;
	text-align: center;
	margin-bottom: 8rpx;
}

.order-detail-card {
	background: #fff;
	border-radius: 16rpx;
	margin: 32rpx 24rpx 0 24rpx;
	padding: 32rpx 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

	.order-image {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}
}

.order-row {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;

	.label {
		color: #999;
		width: 160rpx;
		font-size: 28rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;

		&.code {
			color: #52c41a;
			font-weight: bold;
		}

		&.status-1 {
			color: #52c41a;
		}

		&.status-2 {
			color: #bfbfbf;
		}

		&.status-3 {
			color: #1890ff;
		}
	}
}

.tourist-list {
	background: #fff;
	border-radius: 16rpx;
	margin: 32rpx 24rpx;
	padding: 24rpx;

	.tourist-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		color: #333;
	}

	.tourist-item {
		border-bottom: 1rpx solid #f2f1f6;
		padding: 16rpx 0;

		&:last-child {
			border-bottom: none;
		}

		.tourist-row {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;

			.tourist-label {
				color: #999;
				width: 120rpx;
				font-size: 26rpx;
			}

			.tourist-value {
				color: #333;
				font-size: 26rpx;
			}
		}
	}
}

/* 底部预约按钮 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid rgba(135, 206, 235, 0.2);
	z-index: 100;
	width: 100%;
	box-sizing: border-box;

	.reserve-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #db8c31, #eeb192);
		border-radius: 40rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.4);
		}

		.btn-text {
			font-size: 32rpx;
			font-weight: bold;
			color: white;
		}
	}
}
</style>
